<template>
  <div class="common-body-wrapper">
    <div class="explanationBox">
      <h4 class="title">配置方法说明</h4>
      <p>
        白名单车辆会免费放行，放行规则以临时车通行规则为准。规则中可使用
        <span class="spanBlue">通配符</span>，具体说明如下：
      </p>
      <ul>
        <li>
          <span>" ? "</span> 表示一位数字、字母或汉字
        </li>
        <li>
          <span>" * "</span> 表示多位数字、字母或汉字
        </li>
      </ul>
      <p>
        如：同时配置以下
        <span class="spanBlue">规则</span>：
      </p>
      <ul>
        <li>
          1.
          <span>*警</span>，表示所有以 “警” 字结尾车辆都是白名单车辆
        </li>
        <li>
          2.
          <span>*学</span>，表示所有以 “学” 字结尾车辆都是白名单车辆
        </li>
        <li style="font-size:12px;color: #DE0000;">则以上规则白名单规则1和规则2是“或”的关系</li>
      </ul>
    </div>
    <div class="rulesBox">
      <div class="rulesHead">
        <h4 class="title floatL">已配置规则</h4>
      </div>
      <div class="setRulesContent">
        <div class="addButtomBox">
          <a
            href="javascript:;"
            class="el-button ake_btn el-button--primary"
            @click="isAddRule = true"
            v-if="isPermmited('PARK_CAR:PARK_REDLIST:ADD')"
          >添加规则</a>
          <a
            href="javascript:;"
            class="ake_btn ake_btn_text"
            @click="openEmergencySetup()"
            v-if="isPermmited('PARK_CAR:PARK_REDLIST:EMERGENCY_CONFIG:LIST')"
          >告警设置</a>
          <a
            href="javascript:;"
            v-if="isPermmited('PARK_CAR:PARK_REDLIST:DETAIL')"
            class="ake_btn ake_btn_text"
            @click="openGateLog()"
          >同步详情</a>
          <a
            href="javascript:;"
            v-if="isPermmited('PARK_CAR:PARK_REDLIST:SYNC')"
            class="ake_btn ake_btn_text"
            @click="syncAll()"
          >同步规则</a>
        </div>
        <div class="RuleItemsBox">
          <div class="RulesItem is-add" v-if="isAddRule">
            <el-input type="text" placeholder="请输入规则" :autofocus="true" v-model="ruleValue"></el-input>
            <div class="add-action">
              <a href="javascript:;" @click="_add()">确定</a>
              <a href="javascript:;" @click="isAddRule=false">取消</a>
            </div>
          </div>
          <div class="RulesItem" :key="index" v-for="(rowItem,index) in ruleItems">
            <span>{{rowItem.redlistParam}}</span>
            <i
              class="el-icon-close"
              @click="_delete(index,rowItem)"
              v-if="isPermmited('PARK_CAR:PARK_REDLIST:DEL')"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <!-- xaingqing-modal -->
    <basic-modal ref="synchronismModal" static="true" width="1100">
      <h3 slot="title">同步详情</h3>
      <div class="ModalBody tmpdetailCSS" slot="modal-body">
        <multi-fun-table
          :maxHeight="380"
          sortColumn
          orderType
          isNeedPrint="false"
          isSetTable="false"
          hasCheckboxCol="false"
          :theads-info="synchronismModalData.theadsInfo"
          :tbodys-info="synchronismModalData.tbodysInfo"
          :tHeightModal="synchronismModalData.tHeightModal"
          :fixed-cols="synchronismModalData.fixedCols"
        >
          <!--按钮-->

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span v-else-if="'button' == props.prop">
                  <el-button
                    title="重新同步"
                    size="small"
                    type="primary"
                    icon="icon-synchronize"
                    class="ake-icon-font"
                    v-if="isPermmited('PARK_CAR:PARK_REDLIST:RESYNC') && scope.row['status']==0 && scope.row.syncStatus==3 "
                    @click="sync(scope.row)"
                    plain
                  ></el-button>
                </span>
                <span
                  v-else-if="'syncStatus' == props.prop"
                >{{ scope.row[props.prop] | syncStatusShow }}</span>
                <span
                  v-else-if="'syncTime' == props.prop"
                >{{ scope.row[props.prop] | mileSecondToDate }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!-- <template slot="tdCell" slot-scope="props">
                    <el-table-column :fixed="props.fixed" :label="props.label" min-width="130">
                        <template slot-scope="scope">
                            <el-button title="重新同步" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_green" icon="circle-check" v-if="isPermmited('PARK_CAR:PARK_CAR_RESERVATION:RESYNC') && scope.row.status==0 " @click="sync(scope.row)"></el-button>
                        </template>
                    </el-table-column>
          </template>-->
        </multi-fun-table>

        <!-- 弹窗modal暂时不支持分页  -->
        <table-pagination
          :size="synchronismModalData.total"
          :cur-page="synchronismModalData.pageNumber"
          @backData="getSwitchPagination"
        ></table-pagination>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('synchronismModal')">关闭</button>
      </div>
    </basic-modal>

    <!-- 告警设置 -->
    <el-dialog
      title="告警设置-白名单"
      :visible.sync="dialogVisibleForEmergency"
      width="320px"
      class="zb-dialog"
    >
      <div class="parkinglot-showInfo-content main-content-box" style="padding:0 30px">
        <div class="title-chunk" style="display: flex">
          <h3>告警提醒</h3>
          <el-tooltip class="item" effect="dark" content="告警提醒通过公众号推送到管理员" placement="right">
            <i class="el-icon-question" style="margin-left: 10px;font-size: 20px;"></i>
          </el-tooltip>
        </div>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <h3 style="margin-top:40px;">POS机管理员告警提醒</h3>
        <p class="red-tip">管理员需登录才能收到告警提醒</p>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="pos_cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="pos_cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="isPermmited('PARK_CAR:PARK_REDLIST:EMERGENCY_CONFIG:EDIT')"
          type="primary"
          size="medium"
          @click="saveEmergencySetup()"
        >保 存</el-button>
        <el-button size="medium" plain @click="dialogVisibleForEmergency = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";
//modal
import invokeModal from "@mixins/modal/invokeModal.js";
// 引进vue的js
import park_redlist from "./js/park_redlist.js";
export default {
  name: "parkRedlist",
  mixins: [common, stardardList, invokeModal, park_redlist],
  data() {
    // const today = [
    //   new Date(moment().format("YYYY-MM-DD 00:00:00")),
    //   new Date(moment().format("YYYY-MM-DD 23:59:59"))
    // ];
    return {
      total: 0,
      isAddRule: false,
      ruleValue: "",
      ruleItems: [],
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示

      synchronismModalData: {
        fixedCols: 0,
        tHeightModal: 360,
        list_data: {},
        pageNumber: 1,
        pageSize: 10,
        total: 100,
        theadsInfo: [
          {
            index: 0,
            isShow: false,
            prop: "reno",
            text: "序号",
            width: 68
          },
          {
            index: 1,
            isShow: false,
            prop: "parkName",
            text: "停车场",
            minWidth: 160
          },
          {
            index: 2,
            isShow: false,
            prop: "syncStatus",
            text: "同步结果",
            minWidth: 100
          },
          {
            index: 3,
            isShow: false,
            prop: "syncUserAccount",
            text: "同步操作人",
            minWidth: 100
          },
          {
            index: 4,
            isShow: false,
            prop: "syncTime",
            text: "同步时间",
            minWidth: 180
          },
          {
            index: 5,
            isShow: false,
            prop: "button",
            text: "操作",
            minWidth: 100
          }
        ],
        tbodysInfo: []
      }
    };
  },
  methods: {
    confirmSearch(params) {
      this.getList();
    },
    changePic() {
      this.channelList.forEach(element => {
        element.videoNum = "x";
      });
      this.isShowAllPic = false;
    },
    changeVid() {
      this.channelList.forEach(element => {
        element.videoNum = "1";
      });
      this.isShowAllPic = true;
    },
    defaultPic(event) {
      console.log(event.target);
      console.log(event.target.src);
      event.target.src = defaultImg;
    }
  }
};
</script>

<style lang="less" scoped>
.main-content-box {
  .red-tip {
    font-size: 12px;
    color: #de0000;
    margin-top: 10px;
  }

  h3 {
    font-size: 14px;
    color: #474747;
  }

  .switch-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    > span {
      font-size: 14px;
      color: #666666;
    }
  }
}

.title-chunk {
  position: relative;
}

.tipsBox {
  display: inline-block;
  position: absolute;
  margin-left: 10px;
  &:hover {
    .tips {
      display: block;
    }
  }
  .tips {
    display: none;
    position: absolute;
    z-index: 12;
    padding: 10px;
    background: rgba(50, 52, 54, 0.8);
    border-radius: 5px;
    line-height: 15px;
    width: 150px;
    height: max-content;
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
    &.bottom {
      bottom: 35px;
    }
    p {
      color: #fff;
      text-align: justify;
      font-size: 12px;
    }
  }
}

.el-icon-question {
  &:before {
    color: #bbbbbb;
    font-size: 18px;
  }
}

.initInput(@color) {
  display: inline-block;
  padding: 0px 12px;
  height: 32px;
  font-size: 14px;
  line-height: 30px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.initButton(@color) {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0px 15px;
  border-radius: 3px;
  background-color: @color;

  &:hover {
    background-color: darken(@color, 10%);
  }
}

.anyColor(@color) {
  color: @color;
}

.common-body-wrapper {
  padding: 15px 25px;

  h4 {
    font-size: 16px;
    padding-bottom: 10px;
  }

  .addButtomBox {
    margin-bottom: 20px;

    .ake_btn {
      margin-right: 16px;
    }
  }

  .RuleItemsBox {
    display: flex;
    flex-wrap: wrap;

    .RulesItem {
      display: flex;
      position: relative;
      align-items: center;
      height: 40px;
      margin-right: 20px;
      margin-bottom: 20px;
      background: #f6f6f6;
      border: 1px solid #ebebeb;
      border-radius: 4px;
      padding: 0px 10px;

      .el-icon-close {
        font-weight: 600;
        color: #9d9d9d;
        cursor: pointer;

        &:hover {
          color: darken(#9d9d9d, 20%);
        }
      }

      span {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 13px;
        margin-right: 15px;
        color: #333;
        min-width: 110px;
      }

      &.is-add {
        display: flex;
        width: 258px;

        .el-input {
          flex: 1;
        }

        .add-action {
          display: flex;
          width: 110px;
          margin-right: -10px;
          position: relative;
          margin-left: 2px;

          &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 24px;
            background: #ebebeb;
          }

          a {
            font-size: 14px;
            color: #333333;
            flex: 1;
            text-align: center;
          }
        }
      }
    }
  }

  .Input {
    .initInput(#2cc6bb);
  }

  .rulesHead {
    overflow: hidden;
    margin-top: 25px;
    padding: 15px 0;
    border-top: 1px #ccc solid;
  }
}

.explanationBox {
  line-height: 24px;

  p {
    padding-left: 10px;
    line-height: 30px;
    background: #f6f6f6;
    margin-bottom: 10px;
  }

  ul {
    padding-left: 15px;

    li {
      margin-bottom: 10px;

      span {
        font-weight: bold;
      }
    }
  }

  .spanBlue {
    .anyColor(#5588dd);
  }
}

.buttonBlue {
  margin-left: 5px;
  .initButton(#5995d8);
  color: #fff;
  border: 1px solid #5995d8;
}

.buttonWhite {
  .initButton(#fff);
  margin-left: 5px;
  color: #5995d8;
  border: 1px solid #5995d8;
}
</style>

<style lang="less">
.is-add .el-input {
  .el-input__inner {
    border: none !important;
    font-size: 14px;
    background: #f6f6f6 !important;
  }
}
</style>
